<script setup lang="ts">
import Charts from '@/components/charts/index.vue'
import { ref } from 'vue'

const options = ref({
  title: {
    text: '首页图表',
  },
  tooltip: {},
  legend: {
    data: ['销量'],
  },
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
  },
  yAxis: {},
  series: [
    {
      name: '销量', // 系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列
      type: 'bar', // 系列图表类型
      data: [5, 20, 36, 10, 10, 20],
    },
  ],
})

const setOptions = () => {
  // 设置图表配置项
  options.value.series[0].data = [1, 2, 3, 4, 5, 6]
}
</script>

<template>
  <div style="width: 500px; height: 500px;">
    <Charts :options="options" />
    <el-button @click="setOptions">重置</el-button>
  </div>
</template>
